<template>
  <el-card class="classify" shadow="never">
    <el-form :inline="true" :model="queryData" class="demo-form-inline">
      <el-form-item label="电话号码">
        <el-input type="number" v-model="queryData.phone" placeholder="请输入电话号码" />
      </el-form-item>
      <el-form-item>
        <el-button :loading="tableLoading" @click="queryHandler">查询</el-button>
        <el-button style="margin-left:30px" type="success">已发送条数：{{msgs.renum}}</el-button>
        <el-button style="margin-left:15px" type="primary">剩余条数：{{surnum}}</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="tableLoading" :data="tableData" stripe>
      <el-table-column type="index" label="编号" width="50" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="code" label="短信验证码" />
      <el-table-column prop="dateline" label="创建时间" />
    </el-table>
    <el-pagination :total="pagination.total" :page-size="pagination.pageSize" @current-change="changeHandler" />
  </el-card>
</template>

<script>
import { GetList } from '../../api/mes'
import Upload from '../../components/Upload'
import Ueditor from '@/components/Ueditor' // ES6 Module
export default {
  name: 'Mes',
  components: { Upload, Ueditor },
  data() {
    return {
      queryData: {
        phone: ''
      },
      preview: '',
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      },
      formData: {
        id: '',
        type: 0,
        title: '',
        pic: '',
        detail: ''
      },
      tableLoading: false,
      msgs: {},
      surnum: 0
    }
  },
  created() {
    // this.rela = localStorage.getItem('drole')
    this._getTableData()
  },
  methods: {
    changeHandler(current) {
      this.pagination.currentPage = current
      this._getTableData()
    },
    queryHandler() {
      this.pagination.currentPage = 1
      this._getTableData()
    },
    // 修改状态
    _getTableData() {
      const { pagination, queryData } = this
      const { phone } = queryData
      this.tableLoading = true
      GetList(pagination.currentPage, phone).then(res => {
        const { _data = [], pagination, msg } = res || {}
        if(pagination.currentPage === 1) {
          this.surnum = parseInt(msg.num) - parseInt(msg.renum)
          this.msgs = msg
        }
        this.tableData = _data
        pagination && (this.pagination = pagination)
      }).finally(() => {
        this.tableLoading = false
      })
    }
  }
}
</script>
<style>
.el-upload--picture-card {
    box-sizing: border-box;
    width: 80px !important;
    height: 80px !important;
    line-height: 79px !important;
}
.el-upload-list--picture-card .el-upload-list__item {
    width:80px;
    height: 80px;
    margin: 0 8px 8px 0;
}
.view_box{
  display: flex;
  align-items: center;
}
</style>
